<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='主页',active='home'">
<head th:replace="layout/common::headerFragment(${title},${active})"></head>
<body>
<header th:replace="layout/common::header-body"></header>

<div class="ui main container">
    <div class="ui two column stackable grid" style="min-height: 700px;">

        <div class="four wide column">

            <div class="ui vertical menu">
                <div class="header item">排序</div>
                <a class="active teal item">
                    收件箱
                </a>
                <a class="item">
                    垃圾箱
                </a>
                <a class="item">
                    更新
                </a>
            </div>
        </div>

        <div class="twelve wide column">
            <div class="ui segment">
                <div class="ui divided items">
                    <div class="item">
                        <div class="image">
                            <img src="https://onebugman.cn/semantic-ui/images/wireframe/image.png">
                        </div>
                        <div class="content">
                            <a class="header" href="/article">标题</a>
                            <div class="meta">
                                <span>by 慵懒的小猫 2018-12-01</span>
                            </div>
                            <div class="description">
                                <p>阿斯顿发送到发送到发送到发生的发送到发送到发送到发送到发送到发斯蒂芬阿斯顿发送到法手动阀阿斯顿发送到法手动阀</p>
                            </div>
                            <div class="extra">
                                <div class="ui label" data-content="浏览次数"><i class="eye icon"></i> 123</div>
                                <div class="ui label" data-content="点赞数"><i class="heart icon"></i> 200</div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="content">
                            <a class="header">标题</a>
                            <div class="meta">
                                <span>描述</span>
                            </div>
                            <div class="description">
                                <p>阿斯顿发送到发送到发送到发生的发送到发送到发送到发送到发送到发斯蒂芬阿斯顿发送到法手动阀阿斯顿发送到法手动阀</p>
                            </div>
                            <div class="extra">
                                额外的细节
                            </div>
                        </div>
                    </div>
                </div>
                <div style="text-align: center">
                    <div class="ui pagination menu">
                        <a class="icon item">
                            <i class="left chevron icon"></i>
                        </a>
                        <a class="item">1</a>
                        <a class="item">2</a>
                        <a class="item">3</a>
                        <a class="item">4</a>
                        <a class="icon item">
                            <i class="right chevron icon"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<footer th:replace="layout/common::footer-body"></footer>

</body>
</html>